/*
 * @Author: curse-the-west m18811101669@163.com
 * @Date: 2022-08-30 16:08:23
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-02 15:35:47
 * @FilePath: /react_project/src/components/Header/Header.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
import logo from '../../assets/logo.svg'
import styles from './Header.module.css'
import { Layout, Typography, Input, Dropdown, Menu, Button, Row, Col } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';

import { withTranslation, WithTranslation } from 'react-i18next'
// export {}
// export default 本身

// const items = [
//   {
//     label: '旅游首页',
//     key: '1'
//   },
//   {
//     label: '周末游',
//     key: '2'
//   },
//   {
//     label: '跟团游',
//     key: '3'
//   },
//   {
//     label: '自由行',
//     key: '4'
//   },
//   {
//     label: '私家团',
//     key: '5'
//   },
//   {
//     label: '邮轮',
//     key: '6'
//   },
//   {
//     label: '酒店+景点',
//     key: '7'
//   },
//   {
//     label: '当地游玩',
//     key: '8'
//   },
//   {
//     label: '主题游',
//     key: '9'
//   },
//   {
//     label: '定制游',
//     key: '10'
//   },
//   {
//     label: '游学',
//     key: '11'
//   },
//   {
//     label: '签证',
//     key: '12'
//   },
//   {
//     label: '企业游',
//     key: '13'
//   },
//   {
//     label: '高端游',
//     key: '14'
//   },
//   {
//     label: '爱玩户外',
//     key: '15'
//   },
//   {
//     label: '保险',
//     key: '16'
//   },
// ]
const HeaderComponent: React.FC<WithTranslation> = ({ t }) => {
    return (
        <div className={styles['app-header']}>
            <div className={styles['top-header']}>
                <div className={styles.inner}>
                <Typography.Text> {t('header.title')}</Typography.Text>
                    <Dropdown.Button
                        style={{ marginLeft: 15 }}
                        overlay={<Menu
                            items={[
                                { label: '中文', key: 'zh' },
                                { label: 'English', key: 'en' }
                            ]}
                        ></Menu>}
                        icon={<GlobalOutlined />}
                    >语言</Dropdown.Button>

                    <Button.Group className={styles['button-group']}>
                    <Button>{t('login')}</Button>
                    <Button>{t('signIn')}</Button>
                    </Button.Group>
                </div>
            </div>
            <Layout.Header className={styles['main-header']}>
                <img className={styles['App-logo']} src={logo} alt="" />
          <Typography.Title className={styles['title']} level={2}>{t('travelNet')}</Typography.Title>
                <Input.Search className={styles['search-input']} placeholder='请输入旅游的目的地，或关键字'></Input.Search>
            </Layout.Header>

            <Menu
                className={styles['main-menu']}
                mode='horizontal'>
          <Menu.Item key={1}>{t('TravelHomePage')}</Menu.Item>
          <Menu.Item key={2}>{t('weekend')}</Menu.Item>
          <Menu.Item key={3}>{t('packageTour')}</Menu.Item>
          <Menu.Item key="4"> {t('independentTravel')} </Menu.Item>
          <Menu.Item key="5"> {t('privateGroup')} </Menu.Item>
          <Menu.Item key="6"> {t('cruise')} </Menu.Item>
          <Menu.Item key="7"> {t('Hotels')} </Menu.Item>
          <Menu.Item key="8"> {t('localSwim')} </Menu.Item>
          <Menu.Item key="9"> {t('SubjectSwim')} </Menu.Item>
          <Menu.Item key="10"> {t('CustomSwim')} </Menu.Item>
          <Menu.Item key="11"> {t('Travel')} </Menu.Item>
          <Menu.Item key="12"> {t('visa')} </Menu.Item>
          <Menu.Item key="13"> {t('EnterpriseSwim')} </Menu.Item>
          <Menu.Item key="14"> {t('highEndTourism')} </Menu.Item>
          <Menu.Item key="15"> {t('outdoorsPlay')} </Menu.Item>
          <Menu.Item key="16"> {t('insurance')} </Menu.Item>
            </Menu>
        </div>
    )
}

export const Header = withTranslation()(HeaderComponent)